{% extends 'basic/component.html' %}
{% load static %}
{% load i18n %}

{% block pageTitle %}
    {% trans 'Tools' %}
{% endblock %}

{% block pageHeadExtra %}
{% endblock %}

{% block pageBody %}
<div class="container">
    <div class="row self_content_row">
        <div class="col-md-12 text-center">
            <h2>{% trans 'Material Tools' %}</h2>
            <div class="self_span"></div>
            <div class="text">{% trans 'Here are some material tools.' %}<br> <p></p></div>

            <div class="media first" style="margin-top: 70px">
                <div class="media-left">
                    <a href="{% url 'material:ppredict' %}">
                      <img class="media-object" style="border: 2px solid black" src="{% static 'image/prediction.png' %}" alt="thumbnail">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading text-left heading">&nbsp;{% trans 'Performance Prediction' %}</h4>
                    <p class="text-left">{% trans 'The tool uses AFLOW-ML, a RESTful API that performs performance predictions for material datas in the POSCAR format.' %}</p>
                </div>
            </div>

            <div class="media second">
                <div class="media-left">
                    <a href="{% url 'material:perovskite' %}">
                      <img class="media-object" style="border: 2px solid black" src="{% static 'image/perovskite.png' %}" alt="thumbnail">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading text-left heading">&nbsp;{% trans 'Perovskite oxide Stability Prediction' %}</h4>
                    <p class="text-left">
                        {% trans 'This tool predicts the perovskite form of the ABX compound.</br>' %}
                        {% trans 'Users can use this tool to freely combine the perovskite formula with the calcium and titanium elements allowed in the A and B positions, and then obtain predictions about the stability and formation energy of the perovskite.' %}
                    </p>
                </div>
            </div>

{#            <div class="media third">#}
{#                <div class="media-left">#}
{#                    <a href="#">#}
{#                      <img class="media-object" src="{% static 'image/thumbnail.png' %}" alt="thumbnail">#}
{#                    </a>#}
{#                </div>#}
{#                <div class="media-body">#}
{#                    <h4 class="media-heading text-left heading">&nbsp;Middle aligned media</h4>#}
{#                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.#}
{#                    Donec sed odio dui.#}
{#                    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.#}
{#                </div>#}
{#            </div>#}

        </div>
    </div>
</div>
{% endblock %}

{% block pageFootExtra %}
    <link href="{% static 'css/material/all_materials.css' %}" rel="stylesheet">
    <script src="{% static 'js/material/all_materials.js' %}"></script>
{% endblock %}